<!--
 * @Author: yangzhiyu yangzhiyu@mail.pigcms.com
 * @Date: 2024-03-28 20:50:17
 * @LastEditors: yangzhiyu yangzhiyu@mail.pigcms.com
 * @LastEditTime: 2024-03-29 11:19:04
 * @FilePath: \fe_user_pc\src\views\shotstack\MuseMixedCut\MixedCutPreview\components\Loding.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
/**
 * 混剪loding组件
 */
import { ref, onMounted, onUnmounted, watch } from "vue";
import navBack from "../../MixedCutPlatforms/components/navBack.vue";
import { useRouter, useRoute } from "vue-router";
import utils from "@/common/utils/utils.js";

// 可编辑头部
import EditableHead from "@/views/shotstack/MuseMixedCut/components/EditableHead.vue";
const router = useRouter();
const route = useRoute();

// 可编辑标题
const titleText = ref("混剪预览");
// 假设这是你要循环展示的数据
const items = ref([
  "4组及以上的镜头组,可有效提升作品量",
  "单个镜头组的素材时长达到2min,可有效提升作品量",
  "拍摄时,让镜头/主体动起来可以有效提升作品量",
  "第一个镜头组放最吸引人的素材,可有效提示视频停留时长",
  "可以通过导入多收「自定义音乐」, 提升音乐的丰富度",
]);
// 当前显示的数组索引
const currentIndex = ref(0);

// 当前显示的数据
const currentVisibleItem = ref(items.value[currentIndex.value]);
// 返回上一页  -------这里要改
const backClick = () => {
  router.push(
    `/mixedCutCreat?id=${route.query.id}&type=${route.query.type}&viewType=${route.query.viewType}`
  );
};
// 初始化定时器
onMounted(() => {
  const timer = setInterval(() => {
    currentIndex.value = (currentIndex.value + 1) % items.value.length;
    currentVisibleItem.value = items.value[currentIndex.value];
  }, 3000);

  // 清除定时器
  onUnmounted(() => {
    clearInterval(timer);
  });
});
</script>

<template>
  <div class="Loding">
    <navBack
      @backClick="backClick"
      :contentConfig="{
        title: '混剪项目2024/3/28',
        isShow: true,
      }"
      :leftConfig="{
        isShow: true,
        isShowEllipsis: false,
      }"
    >
      <template #content_text>
        <EditableHead
          :titleText="titleText"
          @changeTitle="titleText = $event"
        ></EditableHead>
      </template>
    </navBack>
    <!-- <img src="../static/one.png" alt=""> -->
    <img
      :src="
        utils.staticPath + 'images/workAi/shotstack/video_template_success.png'
      "
      alt=""
    />
    <h2>正在生成中, 请稍等...</h2>
    <span class="title" ref="displayItem">{{ currentVisibleItem }}</span>
    <a-spin
      :indicator="indicator"
      style="
        position: absolute;
        top: 70%;
        left: 50%;
        transform: translate(-50%, -50%);
      "
    />
  </div>
</template>

<style lang="less" scoped>
.Loding {
  height: 100vh;
  width: 100vw;
  position: relative;

  img {
    position: absolute;
    top: 44%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  h2 {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .title {
    position: absolute;
    top: 64%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    line-height: 20px;
    text-align: center;
  }
}
</style>
